<template>
  <view @touchmove.stop.prevent>
    <view class="px-4">
      <TypeNav></TypeNav>
    </view>
    <v-tabs
      v-model="current"
      lineHeight="0"
      activeColor="#0AC7B9"
      :tabs="tabs"
      @change="changeTab"
    >
    </v-tabs>
    <view class="p-4 load-more">
      <load-refresh
        ref="loadRefresh"
        :isRefresh="true"
        :refreshTime="800"
        :heightReduce="loadMoreHeight"
        :backgroundCover="'#EEEEEE'"
        :pageNo="pageQuery.pageNo"
        :totalPageNo="totalPage"
        @loadMore="loadMore"
        @refresh="refresh"
      >
        <view slot="content-list">
          <!-- 数据列表 -->

          <!-- 传感器列表视图 -->
          <view v-if="currentDeviceType === '传感器'">
            <block v-for="item in deviceList" :key="item.id">
              <CardSensor :device="item" @click.native="showDetail(item)"></CardSensor>
            </block>
          </view>
          <!-- 多联机列表视图 -->
          <view v-if="currentDeviceType === '多联机空调'">
            <block v-for="item in deviceList" :key="item.id">
              <CardAir :device="item" @click.native="showDetail(item)"></CardAir>
            </block>
          </view>
          <!-- 电表 -->
          <view
            v-if="currentDeviceType === '电表'"
            class="grid grid-cols-1 gap-4 mb-4"
          >
            <block v-for="item in deviceList" :key="item.id">
              <CardPower :device="item" @click.native="showDetail(item)"></CardPower>
            </block>
          </view>
          <!-- 水表 -->
          <view
            v-if="currentDeviceType === '水表'"
            class="grid grid-cols-1 gap-4 mb-4"
          >
            <block v-for="item in deviceList" :key="item.id">
              <CardWater :device="item" @click.native="showDetail(item)"></CardWater>
            </block>
          </view>
          <!-- 灯 -->
          <view
            v-if="currentDeviceType === '灯'"
            class="grid grid-cols-2 gap-4 mb-4"
          >
            <block v-for="item in deviceList" :key="item.id">
              <CardLight :device="item" @click.native="showDetail(item)"></CardLight>
            </block>
          </view>
          <!-- 新风空调一体机列表视图 -->
          <view v-if="currentDeviceType === '新风空调一体机'">
            <block v-for="item in deviceList" :key="item.id">
              <CardWindAir :device="item" @click.native="showDetail(item)"></CardWindAir>
            </block>
          </view>
          <!-- 新风全热交换机列表视图 -->
          <view v-if="currentDeviceType === '新风全热交换机'">
            <block v-for="item in deviceList" :key="item.id">
              <CardWindHot :device="item" @click.native="showDetail(item)"></CardWindHot>
            </block>
          </view>
        </view>
      </load-refresh>
    </view>
  </view>
</template>

<script>
import VTabs from '@/components/v-tabs/v-tabs.vue'
// import HeaderNav from '@/pages/index/components/HeaderNav.vue'
import TypeNav from './components/typeNav'
import CardSensor from './components/card-sensor'
import CardPower from './components/card-power'
import CardLight from './components/card-light.vue'
import CardWater from './components/card-water.vue'
import CardControl from './components/card-control'
import CardAir from './components/card-air'
import CardWindAir from './components/card-wind-air'
import CardWindHot from './components/card-wind-hot'
import { mapState } from 'vuex'
import loadRefresh from '@/components/load-refresh/load-refresh.vue'

export default {
  components: {
    loadRefresh,
    VTabs,
    TypeNav,
    CardSensor,
    CardPower,
    CardLight,
    CardWater,
    CardControl,
    CardAir,
    CardWindAir,
    CardWindHot,
  },
  data() {
    return {
      current: '',
      // tabs: ["全部", "一号楼", "二号楼"],
      pageQuery: {
        pageNo: 1,
        pageSize: 15,
      },
      location: '',
      bottomTips: '上拉加载更多',
    }
  },
  computed: {
    loadMoreHeight() {
      const barHeight = uni.getSystemInfoSync().statusBarHeight
      return barHeight + 140
    },
    ...mapState({
      tabs: (state) => state.device.floors,
      currentProject: (state) => state.project.project,
      deviceList: (state) => state.device.deviceList,
      currentDeviceType: (state) => state.device.currentDeviceType,
      loading: (state) => state.device.loading,
      totalPage: (state) => state.device.totalPages,
    }),
  },
  onShareAppMessage() {
    console.log("分享小程序");
  },
  mounted() {
    this.fetchDeviceList()
  },
  methods: {
    fetchDeviceList() {
      this.$store.dispatch('device/fetchDeviceList', {
        ...this.pageQuery,
        projectId: this.currentProject.id, // 'LNH-ZKJW',
        location: this.location,
        type: [this.currentDeviceType],
      })
    },
    changeTab(val) {
      // 过滤掉全部
      if (val > 0) this.location = this.tabs[val]
      else this.location = ''
      this.$store.commit('device/CLEAR_DEVICE_LIST') // 清空设备列表，重新查询
      this.refresh()
      // this.fetchDeviceList()
    },
    showDetail(item) {
      if (item.type === '电表' || item.type === '水表') return
      this.$store.commit('device/UPDATE_CURRENT_DEVICE', item)
      uni.navigateTo({ url: '/pages/data/detail' })
    },
    refresh() {
      // 不要执行清空操作，否则会引起下拉刷新异常【https://github.com/iRainy6661/uni-load-refresh/issues/1】
      // store里面会自行判断请求的pageNo是不是第一页，如果是就直接重新赋值了，不会追加数据
      // this.$store.commit('device/CLEAR_DEVICE_LIST') // 清空设备列表，重新查询
      this.pageQuery.pageNo = 1
      this.fetchDeviceList()
    },
    loadMore() {
      if (this.loading) {
        return
      }
      this.pageQuery.pageNo++
      this.fetchDeviceList()
    },
  },
  watch: {
    loading: function(val) {
      if (!val) {
        this.$refs.loadRefresh.loadOver()
      }
    },
    currentProject: function(val) {
      if (val.id) {
        this.$store.dispatch('device/fetchFloors', {
          type: '传感器',
          projectId: val.id,
        })
        this.$store.commit('device/CLEAR_DEVICE_LIST')
        this.fetchDeviceList()
      }
    },
    currentDeviceType: function(val) {
      this.current = 0
      this.$store.dispatch('device/fetchFloors', {
        type: val,
        projectId: this.currentProject.id,
      })
      this.$store.commit('device/CLEAR_DEVICE_LIST')
      this.fetchDeviceList()
    },
  },
}
</script>

<style lang="scss" scoped></style>
